import React, { useEffect, } from "react";
import * as echarts from "echarts";
export default function Firms() {
    let data = [{
        name: '企业总数',
        value: 850,
    },
    {
        name: '废水企业',
        value: 350,
    },
    {
        name: '废气企业',
        value: 430,
    },
    {
        name: '铅污染',
        value: 390,
    },
    {
        name: '汞污染',
        value: 300,
    }
    ];
    let getArrByKey = (data: any, k: any) => {
        let key = k || "value";
        let res: any = [];
        if (data) {
            data.forEach(function (t: any) {
                res.push(t[key]);
            });
        }
        return res;
    };


    useEffect(() => {
        //请求数据  把数据放入 图表中
        var myChart = echarts.init(document.getElementById("firms") as HTMLDivElement);
        // 指定图表的配置项和数据
        var option: any = {
            grid: {
                top: '2%',
                bottom: -15,
                right: 10,
                left: -40,
                containLabel: true
            },
            xAxis: {
                show: false
            },
            yAxis: [{
                // triggerEvent: true,
                show: true,
                inverse: true,
                data: getArrByKey(data, 'name'),
                axisLine: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    interval: 0,
                    color: '#fff',
                    align: 'left',
                    margin: 60,
                    formatter: function (value: any, index: any) {
                        return '{title|' + value + '}'
                    },
                    rich: {
                        title: {
                            width: 50,
                            align: 'right',
                            fontSize: 14
                        }
                    }
                },
            }, {
                // triggerEvent: true,
                show: true,
                inverse: true,
                data: getArrByKey(data, 'name'),
                axisLine: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    interval: 0,
                    // shadowOffsetX: '-20px',
                    color: ['#fff'],
                    align: 'left',
                    verticalAlign: 'center',
                    // lineHeight: 40,
                    fontSize: 14,
                    formatter: function (value: any, index: any) {
                        return data[index].value + "家"
                    },
                }
            }],
            series: [{
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: "#293F5E"
                },
                yAxisIndex: 0,
                data: data,
                barWidth: 12,
                itemStyle: {
                    normal: {
                        color: "rgba(41, 162, 245, 1)",
                    },
                },
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }, []);

    return <div><div id="firms" style={{ height: "200px", width: "300px" }}></div></div>
}
